<template>
  <div class="edit-project-experience-content">
    <el-form label-position="top" :model="form" :rules="rules" ref="form" v-loading="formLoading">
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请填写公司名称" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="itemName">
            <el-input v-model="form.itemName" placeholder="请填写项目名称" maxlength="100"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目时间" prop="startTime">
            <el-col :span="11">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.startTime"
                  type="date"
                  placement="bottom-start"
                  :picker-options="{disabledDate:(time)=>{
                    return time.getTime()>new Date().getTime();
                  }}"
                  placeholder="请选择开始时间">
              </el-date-picker>
            </el-col>
            <el-col style="text-align: center" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker
                  v-model="form.endTime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  type="date"
                  placement="bottom-start"
                  :picker-options="{disabledDate}"
                  placeholder="请选择结束时间">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="项目职务" prop="postName">
            <el-input v-model="form.postName" placeholder="请填写项目职务" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目描述"  prop="itemContent">
            <el-input
                v-model="form.itemContent"
                type="textarea"
                maxlength="500"
                :autosize="{ minRows: 4, maxRows: 8}"
                :placeholder="'描述该项目，展示你的项目经验立刻打动招聘方~\n例如：\n1.项目背景\n2.项目目标\n3.项目概述'">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目职责" prop="itemDuty">
            <el-input
                v-model="form.itemDuty"
                type="textarea"
                maxlength="500"
                :autosize="{ minRows: 4, maxRows: 8}"
                :placeholder="'描述你在项目中的职责，是时候展示你的工作能力了~\n例如：\n1.项目中担任的角色\n2.项目中有哪些痛点、难点\n3.解决问题的方法'">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目业绩" prop="achievement">
            <el-input
                v-model="form.achievement"
                type="textarea"
                maxlength="500"
                :autosize="{ minRows: 4, maxRows: 8}"
                :placeholder="'描述你的项目业绩，用业绩说话让招聘方快速记住你~\n例如：\n1.目标达成情况\n2.我的贡献\n3.我的收获'">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getItemExp, submitProjectExp} from "@/api/mineCenter";

export default {
  name: "ProjectExperience",
  emits:['refresh'],
  data() {
    return {
      formLoading:false,
      form:{
        id:0,
        companyName:'',
        itemName:'',
        startTime:'',
        endTime:'',
        postName:'',
        itemContent:'',
        itemDuty:'',
        achievement:'',
      },
      rules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        itemName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '请选择项目时间', trigger: 'blur' },
        ],
        postName: [
          { required: true, message: '请输入项目职务', trigger: 'blur' },
        ],
        itemContent: [
          { required: true, message: '请输入项目描述', trigger: 'blur' },
        ],
        // itemDuty: [
        //   { required: true, message: '请输入项目职责', trigger: 'blur' },
        // ],
        // achievement: [
        //   { required: true, message: '请输入项目业绩', trigger: 'blur' },
        // ],
      },
    }
  },
  methods: {
    disabledDate(time){
      if(this.form.startTime){
        return time.getTime()<new Date(this.form.startTime).getTime()||time.getTime()>new Date().getTime();
      }else{
        return time.getTime()>new Date().getTime()
      }
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.formLoading){
            this.$message.warning('请等待加载完成');
            return;
          }
          if(!this.form.endTime){
            this.$message.error('请选择结束时间');
            return;
          }
          const loading=this.$loading({text:'提交中'})
          submitProjectExp(this.form).then(()=>{
            this.$message.success('保存成功');
            this.$emit('refresh',3)
          }).finally(()=>{
            loading.close()
          })
        }
      });
    },
    getDetail(id){
      this.formLoading=true
      getItemExp({id}).then((res)=>{
        this.form=res;
      }).finally(()=>{
        this.formLoading=false;
      }).catch(()=>{
        this.$emit('refresh',3);
      })
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.edit-project-experience-content {
  padding: 0 60px;
  max-height: $dialogMaxHeight;
  overflow-y: scroll;
  .el-date-editor, .el-select {
    width: 100%;
  }
}
</style>
